<template>
  <div class="login">
    <div class="container">
      <div class="main">
        <h3>秋游记后台管理</h3>
        <el-form
          style="margin-top: 10px"
          :label-position="labelPosition"
          label-width="80px"
          :model="form"
          :rules="rules"
        >
          <el-form-item prop="name">
            <el-input
              style="width: 80%; height: 49px; margin-bottom: 10px"
              v-model="form.name"
              placeholder="请输入用户名"
            ></el-input>
          </el-form-item>
          <el-form-item prop="pwd">
            <el-input
              type="password"
              style="width: 80%; height: 49px; margin-bottom: 10px"
              v-model="form.pwd"
              placeholder="请输入密码"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="submit"
              style="
                width: 80%;
                padding: 10px 30px;
                color: white;
                border-radius: 10px;
                background: #cc6633;
              "
              >登录</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: "",
        pwd: "",
      },
      rules: {
        // 定义验证规则
        name: [
          {
            min: 3,
            max: 10,
            message: "格式不正确",
            trigger: ["blur", "change"],
          },
        ],
        pwd: [
          {
            pattern: /^\d{6}$/,
            message: "格式不正确",
            trigger: ["blur", "change"],
          },
        ],
      },
    };
  },
  methods: {
    submit() {
      this.$router.push("/component/container");
      // 点击立即登录 准备提交表单
      this.$refs["form"].validate((valid) => {
        if (valid) {
          console.log("收集到的表单数据：", this.form);
        } else {
          console.warn("表单验证失败，请检查填写的内容");
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  text-decoration: none;
  color: white;
  list-style: none;
}
.login {
  height: 100vh;
  > .container {
    width: 100%;
    height: 100%;
    background: #fbb957;
    > .main {
      position: relative;
      width: 520px;
      max-width: 100%;
      padding: 160px 35px 0;
      margin: 0 auto;
      > h3 {
        font-size: 26px;
        color: #eee;
        margin: 0 auto 40px auto;
        text-align: center;
        font-weight: 700;
      }
      > button {
        width: 448px;
      }
    }
  }
}
</style>
